import Image from "next/image";
import MobileLayout from "../../components/layout/MobileLayout";
import styles from "./page.module.css";
import Link from 'next/link';
export default function ProfilePage() {
  // 用户数据
  const userData = {
    name: "请叫我新之助",
    avatar: "/avatars/xx.jpg",
    level: "至臻2",
    stats: {
      jb: 16800,
      points: 10000,
      followers: 4796
    },
    orders: [
      { id: 1, icon: "/icons/food-order.svg", name: "美食订单" },
      { id: 2, icon: "/icons/ticket-order.svg", name: "票务订单" },
      { id: 3, icon: "/icons/gw.png", name: "酒店订单" },
      { id: 4, icon: "/icons/over.png", name: "其他订单" }
    ],
    services: [
      { id: 1, icon: "/icons/time.svg", name: "我的预约", hasNew: true },
      { id: 2, icon: "/icons/vip.svg", name: "会员等级", hasNew: false }
    ],
    other: [
      { id: 1, icon: "/icons/sz.svg", name: "设置中心", hasNew: true },
      { id: 2, icon: "/icons/wj.svg", name: "主题问卷", hasNew: false }
    ]
  };

  return (
    <MobileLayout>
      <div className={styles.profilePage}>
        {/* 头部 */}
        <div className={`${styles.header} animate-slideInDown`}>
          <div className={`${styles.title} animate-slideInLeft delay-200`}>个人中心</div>
          <div className={`${styles.actions} animate-slideInRight delay-200`}>
            <button className={styles.logoutButton} >
              退出登录
            </button>
            <div className={`${styles.settingsIcon} transition-all hover-scale animate-pulse`}>
              <Link href='/membership'>
                <img src='/icons/二维码.svg' className={`${styles.ewm} animate-slideInRight delay-200`}/>
              </Link>
            </div>
          </div>
        </div>

        {/* 用户信息 */}
        <div className={`${styles.userInfos} animate-fadeIn delay-300`}>
          <div className={`${styles.userInfo} animate-fadeIn delay-300`}>
            <div className={`${styles.userAvatar} animate-scaleIn delay-400`}>
              <Image
                src={userData.avatar}
                alt="用户头像"
                width={60}
                height={60}
                className="transition-transform hover-scale animate-pulse"
              />
            </div>
            <div className={`${styles.userDetails} animate-slideInRight delay-500`}>
              <div className={`${styles.userName} animate-fadeIn delay-600`}>{userData.name}</div>
              <div className={`${styles.userLevel} animate-fadeIn delay-700`}>
                <svg width="16" height="16" viewBox="0 -2 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 2L3 9L12 22L21 9L12 2Z" stroke="white" strokeWidth="2" fill="none" />
                  <path d="M12 22V2M3 9H21" stroke="white" strokeWidth="2" />
                </svg>

                {userData.level}
              </div>
            </div>
            <div className={`${styles.personalInfo} animate-slideInRight delay-500`}>
              <span>个人信息 &gt;</span>
            </div>
          </div>
        </div>

        {/* 用户统计 */}
        <div className={`${styles.statsContainer} animate-slideInUp delay-800`}>
          <div className={`${styles.statItem} animate-scaleIn delay-900 transition-all hover-lift hover-shadow`}>
            <div className={`${styles.statValue} animate-fadeIn delay-1000`}>{userData.stats.jb}</div>
            <div className={`${styles.statLabel} animate-fadeIn delay-1100`}>主题币</div>
          </div>
          <div className={`${styles.statItem} animate-scaleIn delay-1000 transition-all hover-lift hover-shadow`}>
            <div className={`${styles.statValue} animate-fadeIn delay-1100`}>{userData.stats.points}</div>
            <div className={`${styles.statLabel} animate-fadeIn delay-1200`}>咖先用</div>
          </div>
          <div className={`${styles.statItem} animate-scaleIn delay-1100 transition-all hover-lift hover-shadow`}>
            <div className={`${styles.statValue} animate-fadeIn delay-1200`}>{userData.stats.followers}</div>
            <div className={`${styles.statLabel} animate-fadeIn delay-1300`}>咖积分</div>
          </div>
          <div className={`${styles.statItem} animate-scaleIn delay-1100 transition-all hover-lift hover-shadow`}>
            <div className={`${styles.statValue} animate-fadeIn delay-1200`}><img src='/icons/koai.svg' className={`${styles.ewms} animate-slideInRight delay-200`}/></div>
            <div className={`${styles.statLabel} animate-fadeIn delay-1300`}>进入口袋</div>
          </div>
        </div>

        {/* 我的订单 */}
        <div className={`${styles.section}`}>
          <div className={`${styles.sectionHeader}`}>
            <div className={`${styles.sectionTitle}`}>我的订单</div>
            <div className={`${styles.sectionMore} transition-all hover-scale`}>所有订单 &gt;</div>
          </div>
          <div className={`${styles.orderGrid}`}>
            {userData.orders.map((order, index) => (
              <div
                key={order.id}
                className={`${styles.orderItem} animate-scaleIn transition-all hover-lift hover-shadow`}
                style={{ animationDelay: `${1500 + index * 100}ms` }}
              >
                <div className={`${styles.orderIcon} animate-pulse`}>
                  <Image
                    src={order.icon}
                    alt={order.name}
                    width={28}
                    height={28}
                    className="transition-transform hover-scale"
                  />
                </div>
                <div className={`${styles.orderName}`}>
                  {order.name}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 服务权益 */}
        <div className={`${styles.section}`}>
          <div className={`${styles.sectionHeader}`}>
            <div className={`${styles.sectionTitle}`}>服务权益</div>
            <div className={`${styles.sectionMore} transition-all hover-scale`}>更多 &gt;</div>
          </div>
          <div className={`${styles.serviceGrid}`}>
            {userData.services.map((service, index) => (
              <div
                key={service.id}
                className={`${styles.serviceItem} animate-scaleIn transition-all hover-lift hover-shadow`}
                style={{ animationDelay: `${2100 + index * 100}ms` }}
              >
                <div className={`${styles.serviceIcon} animate-pulse`}>
                  <Image
                    src={service.icon}
                    alt={service.name}
                    width={24}
                    height={24}
                    className="transition-transform hover-scale"
                  />
                </div>
                <div className={`${styles.serviceName} animate-fadeIn`} style={{ animationDelay: `${2200 + index * 100}ms` }}>
                  {service.name}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 其他 */}
        <div className={`${styles.section} animate-fadeIn delay-1800`}>
          <div className={`${styles.sectionHeader} animate-slideInUp delay-1900`}>
            <div className={`${styles.sectionTitle} animate-slideInLeft delay-2000`}>服务权益</div>
            <div className={`${styles.sectionMore} animate-slideInRight delay-2000 transition-all hover-scale`}>更多 &gt;</div>
          </div>
          <div className={`${styles.serviceGrid} animate-fadeIn delay-2100`}>
            {userData.other.map((service, index) => (
              <div
                key={service.id}
                className={`${styles.serviceItem} animate-scaleIn transition-all hover-lift hover-shadow`}
                style={{ animationDelay: `${2100 + index * 100}ms` }}
              >
                <div className={`${styles.serviceIcon} animate-pulse`}>
                  <Image
                    src={service.icon}
                    alt={service.name}
                    width={24}
                    height={24}
                    className="transition-transform hover-scale"
                  />
                </div>
                <div className={`${styles.serviceName}`}>
                  {service.name}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 其他选项 */}
        <div className={`${styles.otherOptions}`}>
          <div className={`${styles.optionItem} transition-all hover-lift hover-shadow hover-scale`}>退出登录</div>
        </div>
      </div>
    </MobileLayout>
  );
}